<template>
  <div class="diagnosis_details" id="diagnosis_details">
    <div class="diagnosis_details-top">账号诊断</div>
    <div class="diagnosis_details-wrap mt_14" v-if="!boxShow">
      <div class="search-wrap_record">
        <div>
          <div data-v-378b4e67 class="notice-box"></div>定位达人
        </div>
        <div class="record-right" @click="history">
          查看诊断记录
          <img src="@/assets/li/more.png" />
        </div>
      </div>
      <!-- ==========     搜索整体大盒子    ========== -->
      <div class="search-wrap_box">
        <!-- input输入框 -->
        <div class="box_input">
          <input
            v-model="inputValue"
            type="text"
            placeholder="请输入抖音昵称或抖音号"
            @keyup.enter="toSearchGoods01()"
          />
          <div @click="toSearchGoods01()">
            <img src="@/assets/meng/search01.png" />
          </div>
        </div>

        <!-- 筛选条件 -->
        <div class="box_condition">
          <section class="section01 mt_20">
            <p>筛选条件</p>
            <div>
              <el_select
                v-model="fans"
                title="粉丝数"
                src="../../../../static/meng/search02.png"
                :options="[
                  '不限',
                  '10万-50万',
                  '50万-100万',
                  '100万-500万',
                  '500万-1000万',
                  '>1000万'
                ]"
              />
              <el_select
                v-model="works"
                title="作品数"
                src="../../../../static/meng/search06.png"
                :options="['不限', '<10', '10-50', '50-100', '>100']"
              />
              <el_select
                v-model="fabulous"
                title="点赞数"
                src="../../../../static/meng/search03.png"
                :options="[
                  '不限',
                  '10万-50万',
                  '50万-100万',
                  '100万-200万',
                  '>200万'
                ]"
              />
              <el_select
                v-model="identify"
                title="认证类型"
                src="../../../../static/meng/search05.png"
                :options="['不限', '个人认证', '企业认证']"
              />
            </div>
          </section>
        </div>
        <p class="box_tips">请从以下列表中选择您的账号</p>

        <section class="box_section" style="min-height: 460px">
          <table class="table box_section-table">
            <thead class="box_section-thead">
              <tr>
                <th>达人</th>
                <th>粉丝数</th>
                <th>作品数</th>
                <th>点赞数</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody class="box_section-tbody">
              <tr v-for="(item, index) in detailsListData" :key="item.author_id + '_' + index">
                <td class="childone-td">
                  <div class="tbody_img" @click="isBind && fn">
                    <img :src="item.logo" alt v-errorImg:talent />
                  </div>
                  <div class="tbody_text">
                    <div>{{ item.nickname }}</div>
                    <div>抖音号： {{ item.unique_id }}</div>
                  </div>
                </td>
                <td>{{ format_num(item.total_fans) }}</td>
                <td>{{ format_num(item.total_video) }}</td>
                <td>{{ format_num(item.total_favorite) }}</td>
                <img
                  src="@/assets/wang/work/checked.png"
                  class="checkImg checkImg1"
                  v-if="checked == item.author_id"
                />
                <img
                  src="@/assets/li/unselected.png"
                  class="checkImg"
                  v-if="checked != item.author_id"
                  @click="checked = item.author_id"
                />
              </tr>
            </tbody>
          </table>
          <div
            v-if="showLoading"
            v-loading="showLoading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div class="empty" v-if="noData">
            <img src="@/assets/liu/zw.png" />
            <p>目前没有可以查看的数据哟~</p>
            <div
              class="addIncludeBtn"
              @click="
                includeWord = inputValue;
                showInclude = true;
                includeSearchOne();
                clear_values();
        
              "
            >
              <img src="@/assets/wang/work/addIcon.png" alt />
              <span>添加收录</span>
            </div>
          </div>
          <div class="upgradeBox" v-if="needBuy">
            <RankUpgrade class="rankUpgrade" />
          </div>
        </section>
        <div class="pageBox">
          <el-pagination
            v-if="!noData"
            background
            layout="prev, pager, next, jumper"
            :total="total"
            :page-size="pageSize"
            :current-page="currentPage"
            @current-change="toSearchGoods"
          ></el-pagination>
        </div>

        <div class="box_footer-btn">
          <button @click="$router.push('/inAnalysis/diagnosisSearch')">取消</button>
          <button class="btn2" v-if="!showLoading && !noData" @click="toMatch()">开始诊断</button>
          <button class="btn3" v-else>开始诊断</button>
          <button class="result-watermark" @click="resultWatermark">查看示例</button>
        </div>
      </div>
    </div>
    <!-- 剩余次数 -->
    <el-dialog
      :visible.sync="useCountPop"
      :show-close="false"
      :close-on-press-escape="false"
      :close-on-click-modal="false"
      width="400px"
    >
      <div class="useCountBox">
        <p class="text01">{{ vipName }}每月可使用{{ numberofvisits }}次</p>
        <p class="text02">
          当前已使用
          <span>{{ numberofvisits - surplusCount }}次</span>，剩余
          <span>{{ surplusCount }}次</span>，
        </p>
        <p class="text03">
          本次查询将消耗
          <span>1次</span>机会，确认查询吗？
        </p>
        <!-- <template v-else>
          <p class="text03" v-if="uLevel == '2'">请联系客服~</p>
          <p class="text03" v-else>请升级会员~</p>
        </template> -->
        <div class="optionBox">
          <button
            class="upgradeBtn"
            v-if="!surplusCount && uLevel != '2'"
            @click="toBuy"
          >升级会员</button>
          <el-popover placement="bottom" trigger="click">
            <div class="message_content">
              <div class="popper_arrow"></div>
              <img src="@/assets/img/xiaozhushou_qr.jpg" />
              <p>工作日：9:30--18:30</p>
            </div>
            <button
              class="upgradeBtn"
              v-if="!surplusCount && uLevel == '2'"
              slot="reference"
            >联系客服</button>
          </el-popover>
          <button
            class="upgradeBtn"
            v-if="surplusCount > 0"
            @click="
              useCountPop = false;
              boxShow = true;
              showInclude = false;
              startDiagnosis();
            "
          >确定</button>
          <button class="cancelBtn" @click="useCountPop = false">取消</button>
        </div>
      </div>
    </el-dialog>
    <!-- 添加收录 -->
    <el-dialog
      :visible.sync="showInclude"
      width="600px"
      top="22.5vh"
      class="dialog01"
      @close="
        showInclude = false;
        includeWord = '';
        hasSearch = false;
      "
    >
      <div class="includeDialog" v-if="!boxShow">
        <p class="diaTitle">添加收录</p>
        <div class="input_group includeInput">
          <input
            type="text"
            v-model="includeWord"
            @keyup.enter="includeSearch"
            placeholder="请输入抖音号进行搜索"
          />
          <div @click="includeSearch">
            <img src="@/assets/meng/search01.png" />
          </div>
        </div>
        <div v-if="hasSearch">
          <div class="includeResult" @scroll.passive="getScroll($event)" v-if="includeList.length">
            <div class="includeItem" v-for="(item, index) in includeList" :key="index">
              <img
                :src="item.avatar_larger"
                class="inLogo"
                @click="toTalentDetails(item.uid, item.exsit)"
              />
              <div class="nameBox">
                <p @click="toTalentDetails(item.uid, item.exsit)">{{ item.title }}</p>
                <p>{{item.text_fans }}</p>
              </div>
              <button
                class="toInclude"
                @click="toInclude(item.sec_uid, item.uid, item)"
                v-if="item.exsit == 0"
              >添加收录</button>
              <button v-if="item.exsit == 2">正在收录</button>
              <button v-if="item.exsit == 1">已收录</button>
            </div>
            <p v-if="!loading01 && includeData" class="includeText">
              找不到想找的账号？
              <el-popover placement="right" trigger="hover" popper-class="popoverBox">
                <img src="@/assets/img/xiaozhushou_qr.jpg" class="codeImg" />
                <span slot="reference" class="codeShow">告诉我们</span>
              </el-popover>
            </p>
          </div>
          <div
            v-loading="loading01"
            v-if="loading01"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
          ></div>
          <div class="empty" v-show="!loading01 && includeList.length == 0&&!retryShow">
            <img src="@/assets/wang/work/noResult.png" />
            <p>请输入抖音号或抖音昵称进行收录</p>
          </div>
          <div
            v-show="!loading01 && retryShow &&includeList.length!= 0"
            @click="includeSearch()"
            class="retryBox"
          >
            <div class="imgBox"></div>

            <p>请点击重试</p>
          </div>
          <div
            @click="includeSearch()"
            class="retryBox retryBox1"
            v-show="!loading01 && retryShow &&includeList.length== 0"
          >
            <div class="imgBox"></div>
            <p>请点击重试</p>
          </div>
        </div>
      </div>
    </el-dialog>
    <div class="boxShow" v-if="boxShow">
      <div class="boxShow_02">
        <div
          v-loading="showLoading1"
          class="showLoading1"
          element-loading-spinner="el-icon-loading"
        ></div>正在为您匹配中，请于3分钟后在历史诊断记录 中查看匹配结果
      </div>
      <button class="matching02" @click="history()">我知道了</button>
    </div>
  </div>
</template>

<script>
import SourceIcon from '@/component/SourceIcon.vue'
import RankUpgrade from '@/component/rankUpgrade.vue'
export default {
  name: 'DiagnosisDetails',
  data() {
    return {
      wrapBoxLoading: false, //控制整个页面加载中loading
      checked: 0, //列表默认选中项
      inputValue: this.$store.state.accountDiagnosisList, //输入框的值
      fans: '不限', // 粉丝数下拉选项
      works: '不限', // 作品数下拉选项
      fabulous: '不限', // 点赞数下拉选项
      identify: '不限', // 认证下拉选项
      // 页面列表数据
      detailsListData: [],
      total: 200, // 数据总条目数
      pageSize: 8, // 每页多少条数据
      currentPage: 1, // 当前的页数
      showLoading: false, // 控制加载中的样式
      showLoading1: true, // 控制加载中的样式
      noData: false,

      // 剩余次数
      useCountPop: false,
      vipLevel: '',
      numberofvisits: 0, //总次数
      surplusCount: 0, //剩余次数
      vipName: '',
      isMaxVip: Boolean, //是否是最高级别的会员

      // 收录
      showInclude: false,
      includeWord: '',
      includeList: [],
      loading01: false,
      hasSearch: false,
      canInclude: false,
      boxShow: false,
      needBuy: false,
      includePage: 1,
      includeData: false,
      retryShow: false,
      uLevel:localStorage.getItem('vipLevel')
    }
  },
  components: {
    SourceIcon,
    RankUpgrade,
  },
  props: {},
  computed: {
    changeData() {
      const { fans, works, fabulous, identify } = this
      return { fans, works, fabulous, identify }
    },
  },
  watch: {
    inputValue(newVal, oldVal) {
      if (newVal == '') {
        this.currentPage = 1
        this.detailsListData = []
        this.checked = ''
        this.pageData()
      }
    },
    changeData() {
      this.currentPage = 1
      this.detailsListData = []
      this.checked = ''
      this.pageData()
    },
  },
  created() {
    this.pageData()
    document.title = '账号诊断&智能分析服务平台-掌上精选'
  },
  mounted() {},
  methods: {
    // 搜索框点击事件
    toSearchGoods01() {
      this.currentPage = 1
      this.checked = 0
      this.pageData()
    },
    // 页码切换事件
    toSearchGoods(e) {
      this.currentPage = e
      this.pageData()
    },
    // 数据请求方法
    pageData() {
      // 粉丝数
      let fans
      if (this.fans.indexOf('>') != -1) {
        fans = '10000000-99999999999'
      } else {
        fans = this.fans.replace(/万/g, '0000')
      }
      // 作品数
      let video_count
      if (this.works.indexOf('<') != -1) {
        video_count = '0-10'
      } else if (this.works.indexOf('>') != -1) {
        video_count = '100-99999999'
      } else {
        video_count = this.works
      }

      // 点赞数
      let fabulous
      if (this.fabulous.indexOf('<') != -1) {
        fabulous = '0-10'
      } else if (this.fabulous.indexOf('>') != -1) {
        fabulous = '2000000-99999999999'
      } else {
        fabulous = this.fabulous.replace(/万/g, '0000')
      }
      this.showLoading = true
      this.noData = false
      this.detailsListData = []
      this.$axios
        .post('/api/author/search', {
          age: '不限',
          category: 0,
          city: '不限',
          fans: fans, // 粉丝数范围
          favorite_count: fabulous, //点赞数范围
          gender: 3,
          hint: '不限',
          is_shop: 0,
          is_top_sale: 0,
          keyword: this.inputValue,
          more_age: '不限',
          more_city: '不限',
          more_gender: 3,
          more_province: '不限',
          more_star: '不限',
          order_by: 'desc',
          page: this.currentPage,
          pro_count: '不限',
          province: '不限',
          size: this.pageSize,
          sort: 'totalfans',
          star: '不限',
          verify_type:
            this.identify == '个人认证'
              ? 1
              : this.identify == '企业认证'
              ? 2
              : 3, // 认证类型  3：不限 ；1：个人认证；2：企业认证
          video_count: video_count, // 作品数
        })
        .then((res) => {
          this.showLoading = false
          if (res.data.code == 1002) {
            this.noData = true
            this.needBuy = false
          }
          if (this.checked == 0) {
            this.checked = res.data.data[0].author_id
          }
          this.detailsListData = res.data.data
          var num = res.data.count
          this.total = num > 200 ? 200 : num
          this.needBuy = false

          if (res.data.code == 1003) {
            // var num = res.data.count
            this.total = 200
            // that.loading = false;
            this.needBuy = true
          }
        })
    },
    clear_values() {
      this.inputValue = '' //输入框的值
      this.fans = '不限' // 粉丝数下拉选项
      this.works = '不限' // 作品数下拉选项
      this.fabulous = '不限' // 点赞数下拉选项
      this.identify = '不限' // 认证下拉选项
      this.detailsListData = []
      this.pageData()
    },
    // 开始诊断
    startDiagnosis() {
      this.$axios({
        method: 'get',
        url: '/api/author/SyncAuthorDiagnosis?api-version=2',
        params: {
          authorId: this.checked,
        },
      }).then((res) => {
        if (res) {
          this.$store.commit('diagId', res.data.data.diagId)
          this.$store.commit('authorId', this.checked)
          localStorage.setItem('diagId', res.data.data.diagId)
          localStorage.setItem('authorId', this.checked)
        }
      })
    },
    // 查看示例按钮
    resultWatermark() {
      // this.$router.push('/AccountDiagnosis')
      let router = this.$router.resolve({
        path: `/AccountDiagnosis`,
      })
      window.open(router.href, '_blank')
    },
    // 获取剩余次数和弹窗
    toMatch() {
      let that = this
      that.$axios
        .get('/api/customer/GetNumberofvisitsDetailed', {
          params: {
            API: '/api/author/SyncAuthorDiagnosis', //要访问的接口地址
          },
        })
        .then((res) => {
          if (res.data.code == 0) {
            // 0是不限制次数
            that.vipName = res.data.data.vipName //vipname
            if (res.data.data.numberofvisits > 0) {
              that.numberofvisits = res.data.data.numberofvisits //限制次数
              that.surplusCount = res.data.data.surplusCount //剩余次数
              that.isMaxVip = res.data.data.isMaxVip //是否是最高级别的会员

              that.useCountPop = true
            } else {
              that.startDiagnosis()
            }
          }
        })
        .catch((err) => {
          console.log(err)
        })
      this.useCountPop = true
    },
    // 升级会员
    toBuy() {
      let goLevel = this.upLevel(this.uLevel);
      let router = this.$router.resolve({
        path: `/talent_main/buy?l=${goLevel}`,
      });
      window.open(router.href, '_blank');
    },
    upLevel(level) {  //根据次数权限，获取比当前等级高一级的会员等级
      let aLevel = '';
      if(level == 0 || level == 3){ //免费版、体验版跳到vip
        aLevel = 4;
      }else if(level == 4){ //vip跳到svip，
        aLevel = 5;
      }else if(level == 5 || level == 1){ //vip企业版和svip个人版触发权限判断时，都跳到plus，
        aLevel = 2;
      }
      return aLevel;
    },
    history() {
      this.boxShow = false
      // this.detailsListData = [];
      let router = this.$router.resolve({
        path: `/inAnalysis/diagnosisHishtory`,
      })
      window.open(router.href, '_blank')
    },
    toTalentDetails(id, exsit) {
      //  已收录的可以跳到详情
      if (exsit == 1) {
        let router = this.$router.resolve({
          path: `/talent_main/tdetails/${id}/0`,
        })
        window.open(router.href, '_blank')
      }
    },
    includeSearchOne() {
      this.includePage = 1
      this.includeList = []
      this.includeSearch()
    },
    // 查询收录
    includeSearch() {
      let that = this
      that.hasSearch = true
      that.loading01 = true
      this.retryShow = false
      that.$axios
        .get(
          '/api/author/GetAuthorSearch',
          {
            params: {
              keyword: that.includeWord,
              page: this.includePage,
            },
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel03 != null) {
                that.cancel03()
              }
              that.cancel03 = c
            }),
          }
        )
        .then((res) => {
          that.loading01 = false
          if (res.data.code == 0) {
            if (res.data.data.length) {
              this.includeData = false
              this.includePage += 1
              this.includeList = this.includeList.concat(res.data.data)
            }
            if (res.data.data.length < 10 || !res.data.data) {
              this.includeData = true
            }
            this.retryShow = false
          } else if (res.data.code == 1001) {
            this.retryShow = true
            this.includeData = false
          } else if (res.data.code == 1002) {
            this.includeData = true
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
    getScroll(event) {
      // if (this.includeData) {
      //   return
      // } else {
      // 滚动条距离底部的距离scrollBottom
      let scrollBottom =
        event.target.scrollHeight -
        event.target.scrollTop -
        event.target.clientHeight

      if (
        scrollBottom == 0 &&
        this.includeData == false &&
        this.retryShow == false
      ) {
        this.includeSearch()
      }
      // }
    },
    // 确认收录
    toInclude(sec_uid, uid, item) {
      let that = this
      that.$axios
        .post(
          '/api/author/include',
          {
            sec_uid: sec_uid,
            uid: uid,
          },
          {
            cancelToken: new that.$axios.CancelToken(function executor(c) {
              if (that.cancel04 != null) {
                that.cancel04()
              }
              that.cancel04 = c
            }),
          }
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.$message({
              message:
                '收录成功，我们将在10分钟内完成部分数据收录，请您稍后再试~',
              duration: 2000,
              customClass: 'includeMessage',
              offset: 154,
            })
            item.exsit = 2
          }
        })
        .catch((err) => {
          console.log(err)
        })
    },
  },
}
</script>

<style scoped lang="less">
.diagnosis_details {
  // 升级会员
  .upgradeBox {
    min-height: 60vh;
    position: relative;
    background-color: #fff;
    .rankUpgrade {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
  // 弹窗
  .useCountBox {
    box-sizing: border-box;
    width: 400px;
    height: 260px;
    background-color: #ffffff;
    border-radius: 4px;
    p {
      text-align: center;
      span {
        font-size: 16px;
        color: #fd7f2c;
      }
    }
    .text01 {
      font-size: 20px;
      color: #222222;
      padding-top: 43px;
    }
    .text02 {
      padding-top: 16px;
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .text03 {
      font-size: 16px;
      color: #555555;
      line-height: 30px;
    }
    .optionBox {
      width: 100%;
      display: flex;
      justify-content: center;
      margin-top: 40px;
      .upgradeBtn {
        width: 120px;
        height: 44px;
        background-color: #fd7f2c;
        border-radius: 4px;
        font-size: 16px;
        color: #ffffff;
      }
      .cancelBtn {
        width: 120px;
        height: 44px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 16px;
        color: #fd7f2c;
        margin: 0 15px;
      }
    }
  }
}
.diagnosis_details-top {
  height: 54px;
  line-height: 54px;
  text-align: center;
  border-radius: 4px;
  margin-top: 14px;
  font-size: 22px;
  color: #fff;
  // background-color: skyblue;
  background: url('~@/assets/shi/topbgc.png');
}
.diagnosis_details-wrap {
  // min-height: 822px;
  // min-height: calc(100vh - 62px);
  border-radius: 4px;
  background-color: #fff;
  padding: 20px;
  .search-wrap_record {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .record-left {
      width: 102px;
      height: 40px;
      line-height: 40px;
      text-align: center;
      border-radius: 6px;
      font-size: 14px;
      color: #fff;
      background: #fd7f2c;
    }
    .record-left:hover {
      cursor: default;
    }
    .record-right {
      font-size: 14px;
      color: #fd7f2c;
      font-weight: normal;
      cursor: pointer;
      > img {
        width: 7px;
        height: 11px;
        margin-left: 5px;
        margin-top: 1px;
      }
    }

    .notice-box {
      display: inline-block;
      width: 4px;
      height: 16px;
      border-radius: 100px;
      margin-right: 6px;
      background-color: #fd7f2c;
      margin-top: 1px;
    }
    > div {
      font-size: 16px;
      color: #222;
      font-weight: 600;

      display: flex;
      align-items: center;
    }
  }
}
.box_input {
  width: 400px;
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid #e6e6e6;
  margin-top: 20px;
  margin-left: 0;
  input {
    width: 360px;
    height: 40px;
    line-height: 100%;
    font-size: 14px;
    color: #222222;
    border: none;
    padding: 0 21px;
  }
  div {
    width: 60px;
    height: 40px;
    background-color: #fd7f2c;
    border-radius: 4px;
    position: relative;
    img {
      width: 16px;
      height: 16px;
      cursor: pointer;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}
.box_condition {
  .section01 {
    display: flex;
    > div {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
    }
    #multi_select {
      margin-bottom: 20px;
    }
    #el_select {
      margin-right: 30px;
      margin-bottom: 20px;
    }
    #el_select_city {
      margin-right: 30px;
      margin-bottom: 20px;
    }
    > p {
      white-space: nowrap;
      font-size: 14px;
      font-weight: normal;
      font-stretch: normal;
      line-height: 32px;
      letter-spacing: 0px;
      color: #888888;
      margin-right: 20px;
    }
  }
}
.box_tips {
  font-size: 14px;
  color: #888888;
  // padding-top: 20px;
  padding-bottom: 10px;
}
.box_section-thead {
  th {
    text-align: left;
  }
  th:nth-child(1) {
    width: 548px;
    padding: 0 36px;
    box-sizing: border-box;
  }
}
.box_section-tbody {
  td {
    .tbody_img {
      width: 50px;
      height: 50px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    .tbody_text {
      font-size: 14px;
      margin-left: 14px;
      color: #222;
      font-weight: 600;
    }
    .tbody_text > div:nth-child(2) {
      margin-top: 6px;
      color: #888888;
      font-weight: normal;
    }
  }
  td:nth-child(2),
  td:nth-child(3),
  td:nth-child(4) {
    font-size: 15px;
    font-family: DINAlternate-Bold;
  }
  .childone-td {
    display: flex;
    padding: 14px 36px;
  }
  .checkImg {
    cursor: pointer;
  }
  .checkImg1 {
    width: 20px;
    height: 20px;
  }
}
.box_footer-btn {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 44px;
  margin-bottom: 35px;
  button:nth-child(1) {
    width: 115px;
    height: 40px;
    border-radius: 4px;
    border: solid 1px #fd7f2c;
    font-size: 14px;
    color: #fd7f2c;
  }
  .btn2 {
    width: 115px;
    height: 40px;
    background-color: #fd7f2c;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    margin-left: 50px;
  }
  .btn3 {
    width: 115px;
    height: 40px;
    background-color: #ccc;
    border-radius: 4px;
    font-size: 14px;
    color: #ffffff;
    margin-left: 50px;
  }
  .result-watermark {
    width: 115px;
    height: 40px;
    border-radius: 4px;
    margin-left: 50px;
    border: 1px solid #fd7f2c;
    font-size: 14px;
    color: #fd7f2c;
  }
}
// 收录弹窗
.includeDialog {
  box-sizing: border-box;
  padding: 30px;
  padding-right: 12px;
  // padding-bottom: 60px;
  border-radius: 4px;
  .diaTitle {
    font-size: 16px;
    font-weight: 600;
    color: #222222;
    padding-bottom: 20px;
  }
  .input_group {
    position: relative;
    width: 400px;
    height: 42px; // 边框为1时高度为40px
    border-radius: 4px 4px 4px 4px;
    border: solid 2px #fd7f2c;
    // border: solid 1px #e6e6e6;
    box-sizing: border-box;
    input {
      width: 100%;
      font-size: 14px;
      height: 38px;
      line-height: 38px;
      box-sizing: border-box;
      padding-left: 19px;
      padding-right: 70px;
      border: none;
      border-radius: 4px 4px 4px 4px;
    }
    > div {
      position: absolute;
      right: 0;
      cursor: pointer;
      top: -1px;
      text-align: center;
      width: 60px;
      height: 40px;
      background-color: #fd7f2c;
      border-radius: 0px 4px 4px 0px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 16px;
      }
    }
  }
}
.includeInput {
  width: 530px !important;
}
.includeResult {
  height: 356px;
  overflow-y: auto;

  .includeItem {
    height: 92px;
    border-bottom: 1px solid #e5e5e5;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .inLogo {
      cursor: pointer;
      width: 50px;
      height: 50px;
      border: 1px solid #e5e5e5;
      border-radius: 50%;
      margin-right: 14px;
    }
    .nameBox {
      flex: 1;
      text-align: left;
      p:nth-child(1) {
        font-size: 16px;
        color: #222222;
        cursor: pointer;
      }
      p:nth-child(2) {
        font-size: 14px;
        color: #555555;
        padding-top: 3px;
      }
    }
    button {
      width: 88px;
      height: 32px;
      // background-color: #fff2e9;
      background-color: #f5f5f5;
      border-radius: 4px;
      font-size: 14px;
      color: #fd7f2c;
      margin-right: 22px;
    }
    .toInclude {
      background-color: #fd7f2c;
      color: #ffffff;
    }
  }
  .includeText {
    height: 30px;
    font-size: 14px;
    margin-top: 20px;
    text-align: center;
    color: #888888;
    span {
      color: #fd7f2c;
    }
  }
}
.addIncludeBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 110px;
  height: 40px;
  line-height: 40px;
  background-color: #fd7f2c;
  border-radius: 4px;
  margin: 0 auto;
  margin-top: 30px;
  cursor: pointer;
  img {
    width: 16px;
    height: 16px;
    margin-right: 5px;
  }
  span {
    font-size: 14px;
    color: #ffffff;
  }
}
.boxShow {
  width: 1200px;
  height: 900px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  top: 14px;
  z-index: 66;

  font-size: 14px !important;
  font-weight: 400;
  color: #222;
  &::after {
    width: 100%;
    height: 100%;
    content: '';

    background: url('../../../../assets/li/diagnosisDetails.png') no-repeat;
    z-index: 66;
    filter: blur(10px);
  }
  .boxShow_02 {
    z-index: 68;
    position: absolute;
  }

  .showLoading1 {
    display: inline-block;
    .el-loading-mask {
      .el-loading-spinner {
        top: 8px;
        font-size: 14px;
        left: -16px;
        margin-top: -21px;
        width: 100%;
        text-align: center;

        position: absolute;
        .el-icon-loading {
          font-size: 14px !important;
        }
      }
    }
  }
}

.matching02 {
  width: 115px;
  height: 40px;
  background-color: #fd7f2c;
  border-radius: 4px;
  font-size: 14px;
  color: #ffffff;
  margin-top: 100px;
  z-index: 68;
  position: absolute;
}
.codeImg {
  width: 100px;
  height: 100px;
}
.retryBox {
  cursor: pointer;
  font-size: 14px;
  color: #888888;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 13px;
  .imgBox {
    width: 34px;
    height: 36px;
    margin-bottom: 13px;
    background-image: url('../../../../assets/li/refresh1.png');
  }
  .imgBox:hover {
    background-image: url('../../../../assets/li/refresh2.png');
  }
}
.message_content{
  width: 200px;
  height: 230px;
  img{
    display: block;
    width: 100%;
  }
  p{
    text-align: center;
  }
}
.retryBox1 {
  width: 531px;
  height: 397px;
}
</style>
